<template>
    <div>
        <button @click="showDiv = !showDiv">显示/隐藏</button>
        <div v-if="showDiv">
            <p>{{a}}</p>
            <button @click="a++">+1</button>
        </div>
    </div>
</template>

<script>
    import {onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, ref} from 'vue'
    export default {
        name: 'Smzq',
        components:{},
        setup(){
            console.log('--setup--');
            let a = ref(0);
            let showDiv = ref(true);

            //通过组合式API的方式去写生命周期钩子
            onBeforeMount(()=>{
                //相当于在外面写beforeMount
                console.log('--onBeforeMount--');
            })
            onMounted(()=>{
                console.log('--onMounted--');
            })
            onBeforeUpdate(()=>{
                console.log('--onBeforeUpdate--');
            })
            onUpdated(()=>{
                console.log('--onUpdated--');
            })
            onBeforeUnmount(()=>{
                console.log('--onBeforeUnmount--');
            })
            onUnmounted(()=>{
                console.log('--onUnmounted--');
            })

            return{
                a,showDiv,
            }
        },
        beforeCreate(){
            console.log('--beforeCreate--');
        },
        created(){
            console.log('--created--');
        },
        beforeMount(){
            console.log('--beforeMount--');
        },
        mounted(){
            console.log('--mounted--');
        },
        beforeUpdate(){
            console.log('--beforeUpdate--');
        },
        updated(){
            console.log('--updated--');
        },
        beforeUnmount(){
            console.log('--beforeUnmount--');
        },
        unmounted(){
            console.log('--unmounted--');
        },
    }
</script>

<style>

</style>